<template>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="stateManager.ExamDialogVisible"
           @cancel="closeDialog"
           @ok="closeDialog"
           :modal-title="modalTitle"
           model-size="normal">
        <!--
          you can use custom content here to overwrite
          default content
        -->
        <time-line :data-source="tableList" :titles ="modalTitle":dataLists="UserCourse">
            <template slot="div" slot-scope="props">
                <div class="timeline-item">
                    <div class="row">
                        <div class="col-xs-3 date">
                            <i class="fa fa-file-text"></i>
                            <small class="text-navy">{{changeTime(props.item.begin)}}</small>
                        </div>
                        <div class="col-xs-7 content no-top-border">
                            <p class="m-b-xs"><strong>考试科目：{{props.item.e_name}}</strong></p>

                            <p>考试地点：{{props.item.place}}</p>
                            <p>开始时间:  {{changeTime(props.item.begin)}}</p>
                            <p>结束时间:  {{changeTime(props.item.end)}}</p>
                        </div>
                    </div>
                </div>
            </template>
        </time-line>
    </modal>


</template>

<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                title:'考试列表',
                years:'',
                c_name:'',
                change:false,
                list: {},
                UserCourse:[],
            };
        },
        methods: {
            changeTime:function (time) {
                return new Date(parseInt(time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
            },
            closeDialog: function () {
//                console.log(11);
                this.stateManager.ExamDialogVisible = false;
                this.stateManager.ExamModelId = 0;
            }
        },
        computed: {
            modalTitle: function () {
                return '查看考试'
            },
            tableList(){
                if (this.change) {
                    this.list.fetch();
                    this.change = false;
                }
                return this.list;
            }
        },
        watch: {
            'stateManager.ExamModelId': function (newValue) {
                let self =this;
                this.list = this.$listDataSource({
                    url: 'api/user-exam/'+self.stateManager.ExamModelId
                });
                axios.get('api/user-course/'+this.stateManager.ExamModelId).then(function (response) {
                    self.UserCourse = response.data;
                });
                this.change=true;
            }
        }
    }
</script>
<style>
</style>